<!--
 - Author : chend.
 - 锚点维护日志
 -->
<template>
  <div class="batchLogoManageBox">
    <div class="batchLogoManageWrap">
      <div class="batchLogoManage">

        <!-- 搜索 -->
        <div class="searchWrap">
          <div class="searchForm timeSelect">
            <span class="searchLabel">创建时间：</span>
            <el-date-picker
              placeholder="开始时间"
              class="createTime"
              v-model="createBeginDate"
              type="date"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              :clearable="false"
              align="right">
            </el-date-picker>
            <span class="timeSelectLabel">至</span>
            <el-date-picker
              placeholder="结束时间"
              class="createTime"
              v-model="createEndDate"
              type="date"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              :clearable="false"
              align="right">
            </el-date-picker>
          </div>
          <div class="btn-group btnSubmit">
            <el-button class="left" size="medium" @click="anchorLogListGet" round>搜索</el-button>
          </div>
        </div>

        <!-- 锚点日志列表-表单 -->
        <div class="logoTable">
          <el-table
              v-loading="loadingMarkersTable"
              ref="logoTable"
              :data="logoList"
              stripe
              style="width: 100%">
              <el-table-column
                prop="operateUserName"
                align="left"
                label="操作人"
                width="180">
              </el-table-column>
              <el-table-column
                prop="operateTime"
                align="left"
                label="操作时间">
              </el-table-column>
              <el-table-column
                align="left"
                label="内容">
                <template slot-scope="scope">
                  {{formatContent(scope.row)}}
                </template>
              </el-table-column>
          </el-table>
          <div class="paginationWrap paginationWrapPosition">
            <el-pagination
              class="pageBotton"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        loadingMarkersTable: false, // 表单加载 loading显示标记
        /**
         * 日期预选设置
         * @type {Object}
         */
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        createBeginDate: '', // 日志创建范围--起始时间
        createEndDate: '', // 日志创建范围--截止时间
        pageSize: 12, // 表单每页显示数
        currentPage: 1, // 当前页码
        totalCount: 1, // 总数据量
        logoList: [] // 日志列表
      }
    },
    methods: {
      /**
       * 日志内容 格式化
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   content 日志状态
       * @return     {String}           日志状态的中文描述
       */
      formatContent (content) {
        var operateAction, operateObj
        switch (content.operateAction) {
          case '01':
            operateAction = '新增'
            break
          case '02':
            operateAction = '修改'
            break
          case '03':
            operateAction = '删除'
            break
          default:
            break
        }
        operateObj = content.operateObj === '01' ? '个锚点' : '种锚点类型'
        return operateAction + content.operateNumber + operateObj
      },
      /**
       * 页码跳转
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   e 输入的页码
       */
      handleCurrentChange (e) {
        this.currentPage = parseInt(e) || this.currentPage
        this.anchorLogListGet() // 刷新日志列表
      },
      /**
       * 日志列表 请求
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      anchorLogListGet () {
        this.loadingMarkersTable = true
        this.$request.anchorLogListGet({createEndDate: this.createEndDate, createBeginDate: this.createBeginDate, page: this.currentPage, pageSize: this.pageSize})
          .then(res => {
            this.loadingMarkersTable = false
            this.totalCount = res.totalCount
            this.logoList = res.recordList
            console.log('anchorLogListGet', res)
          }).catch(e => {
            this.loadingMarkersTable = false
          })
      },
      init () {
        this.anchorLogListGet() // 初始化时 加载所有日志列表
      }
    },
    mounted () {
      this.init() // 初始化请求
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  .batchLogoManage {
    @inputHeight: 30px;
    @fontSize: 14px;
    width: 100%;
    overflow: auto;
    .searchWrap {
      float: left;
      width: 94%;
      margin-left: 3%;
      .searchForm {
        float: left;
        padding: 40px 0 50px 10px;
        .searchLabel {
          display: block;
          float: left;
          color: #fff;
          width: 90px;
          line-height: 30px;
          font-size: 14px;
        }
      }
      .timeSelect {
        .timeSelectLabel {
          color: #fff;
          padding: 0 10px;
        }
        .el-icon-date {
          height: 30px;
          line-height: 30px;
          color: #6ba9f9;
        }
        .el-input__prefix {
          left: auto;
          right: 0;
          top: 0;
          padding-left: 0;
        }
        .el-input__inner {
          padding-left: 15px;
        }
      }
      .btnSubmit {
        float: left;
        margin-top: 38px;
        margin-left: 74px;
      }
      .createTimeLabel {
        display: block;
        color: #fff;
        width: 90px;
        float: left;
        line-height: 30px;
        font-size: 14px;
      }
      .el-input__inner {
        height: 30px;
        line-height: @inputHeight
      }
      .createTime {
        .el-input__icon {
          height: 30px;
        }
        .el-range-separator {
          line-height: 24px;
        }
      }
    }
    .btn-group {
      .left {
        float: left;
        color: #fff;
        padding: 10px 40px;
        margin-right: 60px;
        background: -webkit-linear-gradient(left, #088eec, #17b3e7) !important;
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #088eec, #17b3e7) !important;
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #088eec, #17b3e7) !important;
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #088eec, #17b3e7) !important;
        /* 标准的语法（必须放在最后）*/
        border: none;
      }
      .right {
        float: left;
        color: #fff;
        padding: 10px 40px;
        background: none;
        border: 1px solid #5390a3;
        margin-left: 0;
      }
    }
    .logoTable {
      float: left;
      width: 94%;
      margin-left: 3%;
      margin-top: 25px;
      .paginationWrapPosition {
        position: relative;
        right: 20px;
        bottom: 10px;
      }
      .paginationWrap {
        float: right;
        margin:40px 0 20px 0;
        .paginationWrapPageSize {
          float: left;
          color: #657b8d;
          line-height: 28px;
          margin-right: 20px;
          input {
            width: 22px;
            padding: 0 3px;
            background-color: transparent;
            border: 1px solid #657b8d;
            text-align: center;
            -moz-appearance: textfield;
            line-height: normal;
            margin: 0 5px;
            color: #00ffff;
            height: 18px;
          }
        }
        .pageBotton {
          float: left;
          .el-pagination__jump {
            color: #657b8d;
          }
          .el-pagination__editor {
            .el-input__inner {
              border-color: #657b8d;
              background-color: transparent;
              width: 80%;
              height: 20px;
              color: #657b8d;
              border-radius: 0;
            }
          }
          .el-pager {
            >li {
              background: transparent;
              color: #657b8d;
              min-width: 0;
              margin: 0 3px;
            }
            .active {
              color: #00ffff;
              border-bottom: 1px solid  #00ffff;
            }
          }
          .btn-prev {
            padding-right: 5px;
            background-color: transparent;
            color: #657b8d;
            .el-icon-arrow-left {
              &:before {
                content: '上一页'
              }
            }
          }
          .btn-next {
            color: #657b8d;
            padding-left: 5px;
            background-color: transparent;
            .el-icon-arrow-right {
              &:before {
                content: '下一页'
              }
            }
          }
        }
      }
      .tableWrap {
        .tableSelectAll {
          margin: 14px;
          .selectAllBtn {
            margin-left: 25px;
            margin-right: 20px;
            color: #fff;
          }
          .deleteBtn {
            color: #8f9399;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
      .el-table {
        .el-button--text,
        .el-button--text:focus,
        .el-button--text:hover {
          color: #00ffff;
        }
        th {
          background-color: #1d3959;
          color: #fff;
          border: none;
        }
        td {
          border: none;
        }
        tr {
          background-color: #1b2d40;
          color: #fff;
        }
        &::before {
          height: 0;
        }
        .el-loading-mask {
          background-color: rgba(0, 0, 0, 0.4);
        }
      }
      .el-table__body {
        border: none;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #0b2843;
        color: #fff;
      }
      .el-table tr.el-table__row--striped {
        td {
          background-color: #1d3959;
          color: #fff;
        }
      }
    }
  }
  .batchLogoManageBox {
    position: relative;
    width: 100%;
    background: url('../../../assets/images/bg.jpg');
    background-size: cover;
    .batchLogoManageWrap {
      position: absolute;
      height: 100%;
      overflow-y: auto;
    }
  }
</style>
